{% include 'app01/base.html' %}

{% block content %}
    <div style = "height: 100px;"></div>

    <div class = "container-fluid">
        <div class = "row">
            <div class = "col-md-2"></div>
            <div class = "col-md-8">

                <div class = "text-left">
                    <h3>工序详情</h3>
                </div>

                <div class = "card bg-light">
                    <div class = "card-body">
                        <form id = "add-form" onsubmit = "return false" action = "#" method = "post">

                            <div class = "form-group form-row">
                                <div class = "col-sm-3">
                                    <input type = "text" class = "form-control" name = "subprocessName"
                                           id = "subprocessName"
                                           placeholder = "请输入新的子工序名称">
                                </div>
                                <div class = "col-sm-2">
                                    <!--<input type = "submit" class = "btn btn-primary" value = "添加" id="add-btn">-->
                                    <input type = "button" value = "添加" class = "btn btn-primary" onclick = "login()">
                                    <input type = "reset" style = "display: none">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class = "col-md-2"></div>
        </div>
    </div>

    <div class = "container-fluid">
        <div style = "height: 5px;"></div>

        <div class = "row">
            <div class = "col-md-2"></div>
            <div class = "col-md-8 text-center">
                <div class = "card">

                    <div class = "card-body">
                        {% if error_value == 0 %}
                            <h4>数据库中无相关记录</h4>
                        {% else %}
                            <table class = "table table-bordered">
                                <thead class = "thead-light">
                                    <tr>
                                        <th scope = "col">ID</th>
                                        <th scope = "col">子工序名称</th>
                                        <th scope = "col">所属工序</th>
                                        <th scope = "col" style = "color: #e83e8c">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for s in subprocess_list %}
                                        <tr>
                                            <td>{{ s.id }}</td>
                                            <td>{{ s.name }}</td>
                                            <td>{{ s.process }}</td>
                                            <td>
                                                <a href = "{% url 'update_subprocess' s.id %}"
                                                   class = "btn btn-warning">修改</a>
                                                <!--<button type = "button" class = "btn btn-warning" data-toggle = "modal"
                                                        data-target = "#editModal">
                                                    修改
                                                </button>-->
                                                <button type = "button" class = "btn btn-danger del">
                                                    删除
                                                </button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% endif %}

                    </div>
                </div>
                <div class = "card-footer">
                    <div class = "card-title text-left">
                        <a href = "/?/process_list/" class = "btn btn-primary">返回</a>
                    </div>
                </div>
            </div>
            <div class = "col-md-2"></div>

        </div>

    </div>


    <script>
        function login() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "{% url 'view_subprocess' process_id %}", //url
                data: $('#add-form').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result == 'ok') {
                        //swal("成功", "", "success");
                        //alert("增加成功！")
                        swal({
                            title: "成功",
                            type: "success",
                            confirmButtonClass: "btn-success",
                            confirmButtonText: "OK",
                            closeOnConfirm: false
                        }, function (isConfirm) {   //必须使用这个方法，否则sweetalert弹出窗会被window.location.reload方法覆盖
                                                    //      也就是说，sweetalert弹出窗会一闪而过
                            if (isConfirm) {
                                window.location.reload();
                                //$("#subprocessName").val("");   //提交成功后，清空表单输入框
                                $("input[type=reset]").trigger("click");    //使用隐藏的rest按钮来清空表单Input框
                            }
                        });
                    }
                },
                error: function () {
                    alert("异常！");
                },
            });

        }

        //删除事件
        $(".del").on("click", function () {
            var $trEle = $(this).parent().parent()
            var delId = $trEle.children().eq(0).text()

            swal({
                    title: "你确定要删除吗？",
                    text: "删除后将无法恢复！！！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "删除",
                    cancelButtonClass: "btn-light",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                },

                function () {
                    //向后端发送删除请求
                    $.ajax({
                        url: "{% url 'del_subprocess' %}",
                        type: "post",
                        data: {"id": delId},
                        success: function (arg) {
                            swal("删除成功", "此记录已经被删除成功.", "success");
                            //window.location.reload()
                            $trEle.remove() //在页面上删除已经被删除的那行表格
                        },
                    });
                });
        })

    </script>

{% endblock %}

